<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份：<select id="province" onchange="selectCity(this)">
			<option value="">---请选择---</option>
			<option value="1">北京市</option>
			<option value="2">上海市</option>
			<option value="3">山东省</option>
			<option value="4">浙江省</option>
		  </select>
	城市：<select id="city">
			<option value="">---请选择---</option>
			<option value="1">济南市</option>
			<option value="2">青岛市</option>
			<option value="3">潍坊市</option>
			<option value="4">烟台市</option>
		  </select>
	区县：<select id="area">
			<option>崂山区</option>
			<option>市南区</option>
			<option>平度市</option>
			<option>莱西市</option>
		  </select>
		  
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$.post(
				'${pageContext.request.contextPath}/china?method=selectProvince',
				 function(jsonObj) {
					console.log(jsonObj);
					// <option value="2">上海市</option>
					var html = '<option value="">---请选择---</option>';
					/* for (var i = 0; i < jsonObj.length; i++) {
						html += '<option value="'+jsonObj[i].id+'">'+jsonObj[i].province+'</option>';
					} */
					$.each(jsonObj, function() {
						
					});
					$(jsonObj).each(function() {
						// this : province
						// html += '<option value="'+this.id+'">'+this.province+'</option>';
					});
					$(jsonObj).each(function(i, obj) {
						// this : province
						html += '<option value="'+this.id+'">'+this.province+'</option>';
					});
					$('#province').html(html);
				},
				'json'
			);
		});
		
		function selectCity(obj) {
			console.log(obj);// 代表整个select标签
			console.log(obj.value);
			var provinceId = $(obj).val();
			$.post(
				'${pageContext.request.contextPath}/china?method=selectCity',
				{'provinceId' : provinceId},
				 function(jsonObj) {
					console.log(jsonObj);
					var html = '<option value="">---请选择---</option>';
					for (var i = 0; i < jsonObj.length; i++) {
						html += '<option value="'+jsonObj[i].id+'">'+jsonObj[i].city+'</option>';
					}
					$('#city').html(html);
				},
				'json'
			);
		}
	
	</script>
</body>
</html>